<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给定的点集计算冯罗诺图</title>
<style>
</style>
</head>
<body>
	<canvas width="960" height="500"></canvas>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>

	var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(),
	    context = canvas.getContext("2d"),
	    width = canvas.width,
	    height = canvas.height;

	var sites = d3.range(100)
	    .map(function(d) { return [Math.random() * width, Math.random() * height]; });

	var voronoi = d3.voronoi()
	    .extent([[-1, -1], [width + 1, height + 1]]);

	redraw();

	function moved() {
	  sites[0] = d3.mouse(this);
	  redraw();
	}

	function redraw() {
	  var diagram = voronoi(sites),
	      links = diagram.links(),
	      polygons = diagram.polygons();

	  context.clearRect(0, 0, width, height);
	  context.beginPath();
	  drawCell(polygons[0]);
	  context.fillStyle = "#f00";
	  context.fill();

	  context.beginPath();
	  for (var i = 0, n = polygons.length; i < n; ++i) drawCell(polygons[i]);
	  context.strokeStyle = "#000";
	  context.stroke();

	  context.beginPath();
	  for (var i = 0, n = links.length; i < n; ++i) drawLink(links[i]);
	  context.strokeStyle = "rgba(0,0,0,0.2)";
	  context.stroke();

	  context.beginPath();
	  drawSite(sites[0]);
	  context.fillStyle = "#fff";
	  context.fill();

	  context.beginPath();
	  for (var i = 1, n = sites.length; i < n; ++i) drawSite(sites[i]);
	  context.fillStyle = "#000";
	  context.fill();
	  context.strokeStyle = "#fff";
	  context.stroke();
	}

	function drawSite(site) {
	  context.moveTo(site[0] + 2.5, site[1]);
	  context.arc(site[0], site[1], 2.5, 0, 2 * Math.PI, false);
	}

	function drawLink(link) {
	  context.moveTo(link.source[0], link.source[1]);
	  context.lineTo(link.target[0], link.target[1]);
	}

	function drawCell(cell) {
	  if (!cell) return false;
	  context.moveTo(cell[0][0], cell[0][1]);
	  for (var j = 1, m = cell.length; j < m; ++j) {
	    context.lineTo(cell[j][0], cell[j][1]);
	  }
	  context.closePath();
	  return true;
	}
	</script>
</body>
</html>